<ul>
    <!-- 
    子组件 
    v-for="(item,index) of todos" 列表渲染 引号内部是JS表达式而非字符串
    依次遍历出todos数据中的三个item及其序号
    :todo="item" 给子组件注入数据
    @remove="removeTodo(index)" 响应子组件的remove事件 以removeTodo函数来处理
    -->
    <todo-item v-for="(item,index) of todos" :todo="item" @remove="removeTodo(index)"></todo-item>

    <!-- todo-item子组件真正的模板 -->
    <li>
        <!-- {{要渲染的数据}}插值表达式 -->
        {{todo.title}}
        <button @click="onBtnClick">狗带</button>
    </li>
</ul>

<!-- 子组件的模板 -->
<li>
    <!-- {{要渲染的数据}}插值表达式 -->
    {{todo.title}}
    <button @click="onBtnClick">狗带</button>
</li>